import React, { useEffect, useState } from 'react'
import { NavBar, Icon } from 'antd-mobile';
import { withRouter } from 'react-router-dom'
import { Tabs, Badge } from 'antd-mobile';
import '../../assets/css/coupon.css'
import { getCoupon } from '../../request/api'


const tabs = [
    { title: <Badge >未使用</Badge> },
    { title: <Badge>已使用</Badge> },
    { title: <Badge >已失效</Badge> },
];

const initialState = {
    coupon: [{ content: [] }, { content: [] }, { content: [] }],
}


function Coupon(props) {
    const [coup, setCoup] = useState(initialState.coupon)

    useEffect(() => {
        getCoupon().then(res => {
            if (res.code === 200) {
                setCoup(res.list)
            }
        })
    }, [])
    const toBack = () => {
        props.history.goBack()
    }
    
    return (
        <>
            <NavBar
                mode="dark"
                icon={<Icon type="left" />}
                onLeftClick={() => toBack()}
            >优惠券</NavBar>

            <Tabs tabs={tabs} 
                initialPage={0}
                onChange={(tab, index) => { console.log('onChange', index, tab); }}
                onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: ".2rem", backgroundColor: '#f2f2f2',flexWrap:"wrap" }}>
                    {
             
            //  切记是小括号而不是大括号  item后面
                       coup[0].content.map((item,index) => (

                            // console.log(item);
                            <div className="imgBox" key={index}>
                                <img src="../images/quan4.png" alt="" />
                                <div className="rowTop">
                                    <span className="sp1">&yen;{item.money}</span>
                                    <br />
                                    <span className="sp2">满{item.limit_money}可用</span>
                                </div> 
                                <div className="rowRight">
                                    <span className="sp3">{item.title}</span>
                                    <br />
                                    <span className="sp4">2021-01-25至2021-01-26</span>
                                </div>
                                <div className="rowBottom">
                                    {item.description}
                                </div>
                            </div>


                       ))
                    }


                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: ".2rem", backgroundColor: '#f2f2f2',flexWrap:"wrap" }}>
                {
             
             //  切记是小括号而不是大括号  item后面
                        coup[1].content.map((item,index) => (
 
                             // console.log(item);
                             <div className="imgBox" key={index}>
                                 <img src="../images/quan4.png" alt="" />
                                 <div className="rowTop">
                                     <span className="sp1">&yen;{item.money}</span>
                                     <br />
                                     <span className="sp2">满{item.limit_money}可用</span>
                                 </div> 
                                 <div className="rowRight">
                                     <span className="sp3">{item.title}</span>
                                     <br />
                                     <span className="sp4">2021-01-25至2021-01-26</span>
                                 </div>
                                 <div className="rowBottom">
                                     {item.description}
                                 </div>
                             </div>
 
 
                        ))
                     }
 

                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: ".2rem", backgroundColor: '#f2f2f2',flexWrap:"wrap" }}>
                {
             
             //  切记是小括号而不是大括号  item后面
                        coup[2].content.map((item,index) => (
 
                             // console.log(item);
                             <div className="imgBox" key={index}>
                                 <img src="../images/quan4.png" alt="" />
                                 <div className="rowTop">
                                     <span className="sp1">&yen;{item.money}</span>
                                     <br />
                                     <span className="sp2">满{item.limit_money}可用</span>
                                 </div> 
                                 <div className="rowRight">
                                     <span className="sp3">{item.title}</span>
                                     <br />
                                     <span className="sp4">2021-01-25至2021-01-26</span>
                                 </div>
                                 <div className="rowBottom">
                                     {item.description}
                                 </div>
                             </div>
 
 
                        ))
                     }
 

                </div>
            </Tabs>
            {/* <WhiteSpace /> */}
            <div style={{ textAlign: "center", marginTop: ".1rem" }}>

                <i className="iconfont icon-wenhao-yuankuang" style={{ color: "#b2b7c2" }} ></i>&nbsp;
                <span style={{ color: "#b2b7c2" }}>优惠券规则</span>
            </div>

            <div className="footer">
                <span>抢更多好券 &gt;</span>
            </div>
            <br /> <br /> <br />
        </>
    )
}

export default withRouter(Coupon)